<template>
  <div class="invite-rewards">

    <div class="invite-instructions">
      <div class="instructions-box" @click="openNote">
        <img src="./instructions.png" onclick="return false" class="instruct-pic"/>
        <span class="instruct-text">功能说明</span>
      </div>
    </div>

    <div class="invite-rewards-content">
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div class="invite-rewards-item" v-for="(item,index) in checkRewardsList" :key="index">
          <div class="invite-rewards-user">
            <img class="user-avatar" :src="item.userUrl" v-if="item.userUrl" onclick="return false"/>
            <span class="user-avatar" v-else></span>
            <div class="user-info">
              <span class="user-name">{{item.userName}}</span><span class="user-cert">{{item.userCardNumber}}</span>
            </div>
            <img src="../../../assets/img/phone_icon.png" class="user-phone" onclick="return false" @click="callPhone(item.userTel)"/>
          </div>

          <div class="invite-rewards-leave">
            <span class="leave-text">{{item.time | format}}是否在职：</span>
            <button type="button" class="leave-office" @click="openOffice(2,item.id)">已离职</button>
            <button type="button" class="work-office" @click="openOffice(1,item.id)">在职</button>
          </div>
        </div>
      </van-list>
    </div>

    <!--搜索无结果-->
    <div class="rewards-empty-wrap" v-if="checkRewardsList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty"/></div>
        <div class="tip">暂无审核数据~</div>
      </div>
    </div>

    <!--功能说明-->
    <div class="rewards-modal" v-show="rewardRule">
      <div class="rewards-modal-box">
        <div class="modal-con">
          <div class="title-box">
            <span class="title">功能说明</span>
            <img src="./close.png" class="del-icon" @click="closeNote" onclick="return false"/>
          </div>
          <div class="rule-box">
            1、系统根据员工入职时间生成对应的审核任务，驻厂需要及时审核，确认员工是否在职。在职即发放奖励，离职则不发放奖励。
          </div>
          <div class="rule-box">
            例如：员工张三2019年1月1日入职，2019年1月8日则会生成张三的审核任务，驻厂需审核2019年1月8日张三是否在职。
          </div>
        </div>
      </div>
    </div>

    <transform-dialog v-model="leaveModal" textValue="请确定该员工" textValue2="2019-07-20" textValue3="已离职？"
                      @confirm="confirmOfficeModal"
                      @cancel="cancelLeaveModal"></transform-dialog>

    <transform-dialog v-model="officeModal" textValue="请确定该员工" textValue2="2019-07-20" textValue3="在职？"
                      @confirm="confirmOfficeModal"
                      @cancel="cancelOfficeModal"></transform-dialog>

  </div>
</template>

<script>
  import transformDialog from "../../../components/transformDialog";
  import {baseUrl} from "../../../config/env";
  import {formatDate} from "../../../config/util";

  export default {
    inject: ['reload'],
    name: "inviteRewards",
    data() {
      return {
        rewardRule: false,
        leaveModal: false,
        officeModal: false,
        checkRewardsList: [],
        currentPage: 1,
        PageSize: 10,
        loading: false,
        finished: false,
        userSign: '',
        timer: null,
        inviteCheckId: '',
        type: ''
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    methods: {
      onLoad() {
        if (!this.timer) {// 异步更新数据
          this.timer = setTimeout(() => {
            this.getInviteCheckList();
            this.timer = null;
          }, 500)
        }
      },
      getInviteCheckList() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_invite_check_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/get_invite_check_list?sgin=" + this.userSign + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data.length > 0 && resultObj.data != null) {
              for (let i = 0, length = resultObj.data.length; i < length; i++) {
                resultObj.data[i].userCardNumber = this.$decruption(resultObj.data[i].userCardNumber);
              }

              this.checkRewardsList = this.checkRewardsList.concat(resultObj.data);
              this.loading = false;
              this.currentPage++;
            } else {
              this.loading = false;
              if (this.checkRewardsList.length >= resultObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openNote() {
        this.rewardRule = true;
      },
      closeNote() {
        this.rewardRule = false;
      },
      callPhone(userTel) {
        window.location.href = 'tel://' + userTel;
      },
      cancelLeaveModal() {
        this.leaveModal = false;
      },
      confirmOfficeModal() {
        this.$vux.loading.show({
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/update_invite_check?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.post(baseUrl + "/resident/update_invite_check?sgin=" + this.userSign + "&type=" + this.type + "&inviteCheckId=" + this.inviteCheckId + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("审核失败，请重试", "middle");
            } else {
              this.reload();
              if (this.type == 1) {
                this.officeModal = false;
              } else {
                this.leaveModal = false;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      cancelOfficeModal() {
        this.officeModal = false;
      },
      openOffice(type, checkId) {//在职、已离职审核
        this.type = type;
        this.inviteCheckId = checkId;
        if (type == 1) {
          this.officeModal = true;
        } else {
          this.leaveModal = true;
        }
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      }
    },
    components: {
      transformDialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .invite-rewards
    display: flex
    flex-direction: column
    wh(100%, 100%)
    background: #F2F2F2
    .invite-instructions
      display: flex
      justify-content: flex-end
      wh(100%, 0.8rem)
      position: fixed
      top: 0
      z-index: 99
      background: #F2F2F2
      .instructions-box
        display: flex
        align-items: center
        wh(auto, 0.8rem)
        .instruct-pic
          padding-left: 0.16rem
          wh(0.48rem, 0.48rem)
        .instruct-text
          padding-left: 0.16rem
          padding-right: 0.32rem
          size-color(0.373rem, #666)
    .invite-rewards-content
      display: flex
      flex-direction: column
      wh(100%, auto)
      position: absolute
      top: 0.8rem
      .invite-rewards-item
        wh(100%, 3.067rem)
        background: #FFF
        border-bottom: 0.027rem solid #F2F2F2
        .invite-rewards-user
          display: flex
          padding-top: 0.373rem
          padding-bottom: 0.32rem
          wh(100%, 1.387rem)
          .user-avatar
            margin-left: 0.32rem
            margin-right: 0.32rem
            wh(1.387rem, 1.387rem)
            background: #F2F2F2
            border-radius: 50%
          .user-info
            display: flex
            flex-direction: column
            .user-name
              width: 5.8rem
              padding-top: 0.187rem
              padding-bottom: 0.16rem
              size-color(0.453rem, #333)
              ellipsis()
            .user-cert
              padding-top: 0.16rem
              size-color(0.373rem, #666)
          .user-phone
            margin-left: auto
            margin-right: 0.32rem
            margin-top: 0.107rem
            wh(0.533rem, 0.533rem)
        .invite-rewards-leave
          display: flex
          align-items: center
          wh(100%, 0.64rem)
          .leave-text
            size-color(0.373rem, #3CAFFF)
            padding-left: 0.32rem
          .leave-office
            margin-left: auto
            wh(1.92rem, 0.64rem)
            border: 0.027rem solid rgba(128, 128, 128, 1)
            border-radius: 0.32rem
            font-size: 0.347rem
            color: rgba(128, 128, 128, 1)
            background: #fff
          .work-office
            margin-left: 0.267rem
            margin-right: 0.32rem
            wh(1.92rem, 0.64rem)
            border: 0.027rem solid rgba(60, 175, 255, 1)
            border-radius: 0.32rem
            font-size: 0.347rem
            color: rgba(60, 175, 255, 1)
            background: #fff
    .rewards-modal-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
      .modal-con
        position: absolute
        width: 100%
        height: 9.186rem
        bottom: 0
        background: #FFF
        .title-box
          display: flex
          align-items: center
          width: 100%
          height: 1.333rem
          border-bottom: 1px solid rgba(204, 204, 204, 1)
          .title
            display: flex
            justify-content: center
            width: 100%
            font-size: 0.44rem
            color: rgba(27, 27, 27, 1)
          .del-icon
            position: absolute;
            width: 0.386rem;
            height: 0.386rem;
            right: 0.373rem;
        .rule-box
          width: 92.53%
          height: auto
          margin: 0 auto
          margin-top: 0.373rem
          font-size: 0.413rem
          color: rgba(68, 68, 68, 1)
          line-height: 0.626rem
          margin-bottom: 0.8rem
    .rewards-empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
